﻿jQuery.fn.photowall = function (settings) {
    settings = jQuery.extend({
        row: 2,
        column: 3,
        width: 300,
        height: 300,
        photos: []
    }, settings);

    var container = $(this),
        containerWidth = container.width(),
        containerHeight = container.height(),
        position = [{ top: 0, left: 0, width: settings.width, height: settings.height },
                    { top: 0, left: containerWidth / settings.column, width: settings.width, height: settings.height/2 },
                    { top: containerHeight / settings.row, left: containerWidth / settings.column, width: settings.width, height: settings.height / 2 },
                    { top: 0, left: containerWidth / settings.column * 2, width: settings.width, height: settings.height }];

    container.css({"position":"relative"});
    $.each(settings.photos,function (i, v) {
        var mask_item = $('<a href="' + this.url + '" class="mask_item"></a>').css(position[i]);
        mask_item.append($('<img src="' + this.src + '" width="' + settings.width + '" height="' + settings.height + '" border="0" />').css({ top: (position[i].height < settings.height ? -position[i].height / 4 : 0) }))
                 .append($('<div class="mask_layer"></div>').css({ width: position[i].width, height: position[i].height }));
        container.append(mask_item);
    });

    //添加mask
    var masklayers = container.find(".mask_layer"),
        hoverCSS = { "background": "#000", "filter": "alpha(Opacity=0)", "-moz-opacity": "0", "opacity": "0" },
        maskedCSS = { "background": "#000", "filter": "alpha(Opacity=50)", "-moz-opacity": "0.5", "opacity": "0.5" };

    masklayers.mouseenter(function () {
        masklayers.css(maskedCSS);
        $(this).css(hoverCSS);
    }).mouseleave(function () {
        masklayers.css(maskedCSS);
    });
    container.mouseleave(function () { masklayers.css(hoverCSS); });
};